<div class="text-lg font-medium mb-4"> {{ 'COMPONENTS.CALCULATION.MEASURE_CONTROL' | translate: {Default: "Measure Control"} }} </div>

<div>
  <mat-form-field appearance="fill">
      <mat-label>
        {{ 'COMPONENTS.COMMON.DisplayBehaviour' | translate: {Default: 'Display Behaviour'} }}
      </mat-label>
      <mat-select [formControl]="displayBehaviour">
          <mat-option [value]="DISPLAY_BEHAVIOUR.descriptionOnly">
            {{ 'COMPONENTS.COMMON.DisplayBehaviour_Description' | translate: {Default: 'Description'} }}
          </mat-option>
          <mat-option [value]="DISPLAY_BEHAVIOUR.descriptionAndId">
            {{ 'COMPONENTS.COMMON.DisplayBehaviour_DescriptionID' | translate: {Default: 'Description ID'} }}
          </mat-option>
          <mat-option [value]="DISPLAY_BEHAVIOUR.idAndDescription">
            {{ 'COMPONENTS.COMMON.DisplayBehaviour_IDDescription' | translate: {Default: 'ID Description'} }}
          </mat-option>
          <mat-option [value]="DISPLAY_BEHAVIOUR.idOnly">
            {{ 'COMPONENTS.COMMON.DisplayBehaviour_IDOnly' | translate: {Default: 'ID Only'} }}
          </mat-option>
          <mat-option >
            {{ 'COMPONENTS.COMMON.DisplayBehaviour_Auto' | translate: {Default: 'Auto'} }}
          </mat-option>
        </mat-select>
  </mat-form-field>
</div>

<div class="text-base my-4">
  {{ 'COMPONENTS.CALCULATION.MeasureSelectOptions' | translate: {Default: 'Measure Select Options'} }}
</div>
<mat-selection-list displayDensity="cosy" cdkDropList (cdkDropListDropped)="drop($event)" class="ngm-cdk__drag-list"
  [(ngModel)]="selectedMeasures"
  (selectionChange)="onSelectionChange($event)">
    <mat-list-option *ngFor="let measure of measures$ | async" [value]="measure.name"
      cdkDrag cdkDragBoundary=".ngm-cdk__drag-list">
      <ngm-entity-property [property]="measure" [displayBehaviour]="displayBehaviour.value"></ngm-entity-property>
    </mat-list-option>
</mat-selection-list>
